import React, { Fragment } from 'react';
import { Card, Content, Input } from 'react-fule-ui';

export default function FuleInput() {
  const getOnChange = (data) => {
    console.log(data);
  };
  return (
    <Fragment>
      <Content>
        <Content.Header>输入框</Content.Header>
        <Content.Body>
          <Card>
            <Card.Body>
              <div className="demo-block">
                <Input placeholder="s" size="s" />
              </div>
              <div className="demo-block">
                <Input placeholder="m" size="m" />
              </div>
              <div className="demo-block">
                <Input placeholder="xl" size="xl" />
              </div>
              <div className="demo-block">
                <Input placeholder="full" size="full" />
              </div>
              <div className="demo-block is-error">
                <Input placeholder="请输入内容" />
              </div>
              <div className="demo-block">
                <Input placeholder="请输入内容" disabled />
              </div>
              <div className="demo-block">
                <Input value="122" onChange={getOnChange} />
              </div>
              <div className="demo-block">
                <Input value="122" disabled />
              </div>
            </Card.Body>
          </Card>
        </Content.Body>
      </Content>
    </Fragment>
  );
}
